<template>
  <div style="height: 100%; text-align: center">
    <div class="displayer">
      <div>
        <el-button
          icon="el-icon-back"
          @click="backToBlogs"
          circle
          type="primary"
          style="margin:10px,display:inline-block;margin-right:50px"
        ></el-button>
        <h2 style="display: inline-block">{{ title }}</h2>
      </div>
      <mavon-editor
        class="md"
        style="margin: 0 auto"
        :value="content"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :toolbars="toolbars"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
      />
      <div class="messages">
        <div class="outside-box">
          <div class="edit">
            <!-- <div
              contentEditable
              rows="5"
              class="edit-box"
              id="edit-box"
              placeholder="请输入您的留言"
            ></div> -->
            <el-input
              type="textarea"
              v-model="newRemark"
              placeholder="请输入您的评论"
            ></el-input>
            <!-- <button class="msg-button" onclick="remark()">留言</button> -->
            <el-button
              type="primary"
              class="remark-btn"
              size="small"
              @click="remark()"
              >评论</el-button
            >
          </div>

          <div class="chat" id="chat">
            <div
              class="chat-box"
              style="background-color: #57a3f31c"
              v-for="(remark, index) in remarks"
              :key="index"
            >
              <div class="remark-box">
                <label class="msg-user">{{ remark.rmkUser }}:</label>
                {{ remark.rmkContent }}
              </div>
              <div
                class="replys"
                v-for="reply in remark.replys"
                :key="reply.rpyId"
              >
                <!-- 字体变成14号试一试 -->
                <div class="reply">
                  <label class="msg-user">{{ reply.rpyUser }}:</label>
                  {{ reply.rpyContent }}
                </div>
              </div>
              <div>
                <!-- <div
                  contentEditable
                  rows="2"
                  class="reply-edit-box"
                  placeholder="请输入您的回复"
                  
                ></div> -->
                <el-input
                  v-model="newReply[index]"
                  placeholder="请输入您的回复"
                >
                  <el-button
                    class="reply-button"
                    @click="reply(remark.rmkId, index)"
                    slot="append"
                    >回复</el-button
                  >
                </el-input>
              </div>
            </div>
            <p id="chat-bottom"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "../styles/contact.css";

.displayer {
  width: 90%;
  margin-left: 5%;
  margin-top: 50px;
  text-align: left;
  border-radius: 10px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
}

.messages-box {
  width: 1050px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
}
</style>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
  name: "BlogDisplay",
  components: {
    mavonEditor,
  },
  data() {
    return {
      id: 0, //0代表是新建，其他代表是编辑
      title: "",
      time: "",
      class: "",
      content: "",
      newRemark: "",
      newReply: [],
      remarks: [
        {
          rmkId: "1",
          rmkTime: "sss",
          rmkUser: "Sam",
          rmkContent: "bbb",
          replys: [
            {
              rpyId: "1",
              rpyTime: "2020-11-07 15:31",
              rpyUser: "Constance",
              rpyContent: "aaa",
            },
            {
              rpyId: "2",
              rpyTime: "2020-11-07 15:32",
              rpyUser: "Mike",
              rpyContent: "bbb",
            },
          ],
        },
        {
          rmkId: "2",
          rmkTime: "sss",
          rmkUser: "Sam",
          rmkContent: "bbb",
          replys: [
            {
              rpyId: "1",
              rpyTime: "2020-11-07 15:31",
              rpyUser: "Constance",
              rpyContent: "aaa",
            },
            {
              rpyId: "2",
              rpyTime: "2020-11-07 15:32",
              rpyUser: "Mike",
              rpyContent: "bbb",
            },
          ],
        },
      ],
      value: "## llllllla ",
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
      },
    };
  },
  created: function () {
    this.id = this.$route.query.id;
    console.log("blog-display-id" + this.id);
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/blog",
      method: "post",
      transformRequest: [
        function (data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        },
      ],
      data: {
        funcType: 3,
        id: that.id,
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    }).then(
      function (res) {
        console.log("displayblog success");
        that.time = res.data.time;
        that.title = res.data.title;
        that.sketch = res.data.sketch;
        that.tagValue = res.data.class;
        that.content = res.data.content;
      },
      function (res) {
        console.log(res);
        console.log("啊呀，show blog edit出错啦");
      }
    );

    that = this;

    this.$http({
      url: "servlet/blog",
      method: "post",
      transformRequest: [
        function (data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        },
      ],
      data: {
        funcType: 7,
        blogId: that.id,
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    }).then(
      function (res) {
        that.remarks = res.data.remarks;
        that.newReply = [];
        for (let i = 0; i < that.remarks.length; i++) {
          that.newReply.push("");
        }
      },
      function (res) {
        console.log(res);
        console.log("啊呀，blog-showMessages出错啦");
      }
    );

    //加载登录前输入的评论
    this.newRemark = sessionStorage.getItem("blogRemark");

    //加载登录前输入的回复
    let replyBefore=JSON.parse(sessionStorage.getItem("blogReply"));

    this.replys[replyBefore.index]=replyBefore.reply;

  },
  methods: {
    backToBlogs() {
      this.$router.go(-1);
    },
    remark() {
      var isLogined = JSON.parse(sessionStorage.getItem("isLogined"));
      var d = new Date();
      var remarkTime =
        "" +
        d.getFullYear() +
        "-" +
        d.getMonth() +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      if (!isLogined) {
        this.$message({
          message: "请登录或注册后登录后再留言",
          type: "error",
        });

        //保存一下remark
        sessionStorage.setItem("blogRemark", this.newRemark);

        this.$router.replace("/login");
      } else {
        console.log("评论");
        var user = sessionStorage.getItem("user");
        let that = this;
        let qs = this.$qs;
        this.$http({
          url: "servlet/blog",
          method: "post",
          transformRequest: [
            function (data) {
              //在请求之前对data传参进行格式转换
              data = qs.stringify(data);
              return data;
            },
          ],
          data: {
            funcType: 8,
            blogId: that.id,
            rmkUser: user,
            rmkTime: remarkTime,
            rmkContent: that.newRemark,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        }).then(
          function (res) {
            that.remarks = res.data.remarks;
          },
          function (res) {
            console.log(res);
            console.log("啊呀，messages-remark出错啦");
            that.newReply.push("");
          }
        );
        this.newRemark = "";
      }
    },
    reply(rmkId, index) {
      var isLogined = JSON.parse(sessionStorage.getItem("isLogined"));
      var d = new Date();
      var replyTime =
        "" +
        d.getFullYear() +
        "-" +
        d.getMonth() +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      if (!isLogined) {
        this.$message({
          message: "请登录或注册后登录再回复",
          type: "error",
        });

        this.$router.replace("/login");

        let blogReply = {
          index: this.index,
          reply: this.newReply[index],
        };

        let str = JSON.stringify(blogReply);

        sessionStorage.setItem("blogReply", str);
      } else {
        var user = sessionStorage.getItem("user");
        let that = this;
        let qs = this.$qs;
        this.$http({
          url: "servlet/blog",
          method: "post",
          transformRequest: [
            function (data) {
              //在请求之前对data传参进行格式转换
              data = qs.stringify(data);
              return data;
            },
          ],
          data: {
            funcType: 9,
            blogId: that.id,
            rmkId: rmkId,
            rpyUser: user,
            rpyTime: replyTime,
            rpyContent: that.newReply[index],
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        }).then(
          function (res) {
            that.remarks = res.data.remarks;
          },
          function (res) {
            console.log(res);
            console.log("啊呀，messages-reply出错啦");
          }
        );
        this.newReply = "";
      }
    },
  },
};
</script>